<template>

  <el-space>
    <el-card class="box-card" style="width: 400px;height: 1080px;">
      <div class="card-header">
        <span>文件列表</span>

      </div>
      <el-row style="width: 700px;height: 10px;">
      </el-row>
      <div>
        <el-scrollbar style="height:1000px">
          <el-tree :data="data" ref="tree" node-key="id" :default-expanded-keys="expandedkeys" :props="defaultProps" @node-click="show" />
        </el-scrollbar>
      </div>
    </el-card>

    <el-card class="box-card" style="width: 1000px;height: 1080px;">
      <div class="card-header">
        <span>Card name</span>
        <label style="padding-left:30px">{{ currentFolder }}</label>
      </div>
      <div>
        <el-scrollbar style="height:1000px;">
          <el-table :data="tableData" :default-sort="{ prop: 'filename', order: 'descending' }" style="width: 100%">
            <el-table-column prop="filename" label="filename" sortable width="600" />
            <el-table-column prop="newfilename" label="newfilename" width="280" />
          </el-table>
        </el-scrollbar>
      </div>
    </el-card>


    <el-card class="box-card" style="width: 400px;height: 1080px;">


      <el-input v-model="initfolder" @change="reload" placeholder="Please input" class="input-with-select">
        <template #prepend>
          <el-select v-model="select" placeholder="Select" style="width: 115px">
            <el-option key="3" label="InitFolder" value="3" />
          </el-select>
        </template>
      </el-input>

      <el-row style="width: 400px; height:30px">
      </el-row>

      <el-input v-model="remove1" @change="rename" placeholder="Please input" class="input-with-select">
        <template #prepend>
          <el-select v-model="select" placeholder="Select" style="width: 115px">
            <el-option key="3" label="Remove" value="3" />
          </el-select>
        </template>
      </el-input>

      <el-input v-model="remove2" @change="rename" placeholder="Please input" class="input-with-select">
        <template #prepend>
          <el-select v-model="select" placeholder="Select" style="width: 115px">
            <el-option key="3" label="Remove" value="3" />
          </el-select>
        </template>
      </el-input>

      <el-input v-model="remove3" @change="rename" placeholder="Please input" class="input-with-select">
        <template #prepend>
          <el-select v-model="select" placeholder="Select" style="width: 115px">
            <el-option key="3" label="Remove" value="3" />
          </el-select>
        </template>
      </el-input>

      <el-input v-model="remove4" @change="rename" placeholder="Please input" class="input-with-select">
        <template #prepend>
          <el-select v-model="select" placeholder="Select" style="width: 115px">
            <el-option key="3" label="Remove" value="3" />
          </el-select>
        </template>
      </el-input>

      <el-row style="width: 400px; height:30px">
      </el-row>


      <el-input v-model="prefix" @change="rename" placeholder="Please input" class="input-with-select">
        <template #prepend>
          <el-select v-model="select" placeholder="Select" style="width: 115px">
            <el-option key="1" label="Prefix" value="1" />
          </el-select>
        </template>
      </el-input>

      <el-row style="width: 400px; height:30px">
      </el-row>

      <el-row style="width: 400px; height:30px;">
        <el-button @click="save">Save</el-button>
      </el-row>

    </el-card>

  </el-space>
</template>

<script lang="ts" setup>

import axios from 'axios'
import { ref, reactive, watch, defineComponent } from 'vue'

interface fileInfo {
  filename: String,
  filefullname: String,
  newfilename: String
}

const defaultProps = {
  children: 'children',
  label: 'label',
}

let data = ref([])

let expandedkeys  = ref<string[]>([])


let tableData = ref<fileInfo[]>()

let select = ref({})

let remove1 = ref('')
let remove2 = ref('')
let remove3 = ref('')
let remove4 = ref('')
let prefix = ref('')

let initfolder = ref('/pf')

Initfolders(initfolder.value)

var currentFolder = ref(initfolder.value)

function show(obj) {

  currentFolder.value = obj.folder;
  console.log(obj.folder)

  SaveSession(obj.folder);

  AppendFolders(obj).then(function (data) {
    console.log('------------1-------------')
    return getFileList(obj)
  }).then(function (data) {
    rename()
  })
    ;
}

function Initfolders(url) {
  axios.get('/api/File/Initfolders').then(function (msg) {
    data.value = msg.data.folderInfos
    
    expandedkeys.value = [msg.data.lastid];
  })
}

function SaveSession(folder){

  axios.post('/api/File/SaveSession', { folder: folder }).then(function (msg) {
    console.log(msg.data)
  })
}

const tree = ref()

function AppendFolders(obj) {
  return new Promise(function (resolve, reject) {
    axios.get('/api/File/GetList?folder=' + obj.folder).then(function (msg) {

      console.log(msg.data)

      tree.value.updateKeyChildren(obj.id, msg.data)

      resolve(msg.data);
    })
  })
}

function getFileList(obj) {
  return new Promise(function (resolve, reject) {

    console.log('获取文件')
    console.log(obj.folder)
    axios.get('/api/File/GetFileList?folder=' + obj.folder).then(function (msg) {

      console.log(msg.data)

      tableData.value = msg.data

      resolve(msg.data);
    })

  })

}

function reload() {
  Initfolders(initfolder.value)
}

function rename() {

  tableData.value?.forEach((e, f) => {
    console.log(e.newfilename)
    e.newfilename = e.filename.replace(remove1.value, '').replace(remove2.value, '').replace(remove3.value, '').replace(remove4.value, '')
    e.newfilename = prefix.value + e.newfilename
  })
}

function save() {
  console.log('save')

  axios.post('/api/File/ReNameFiles', { fileInfos: tableData.value }).then(function (msg) {
    alert(msg.data)
  })

}

</script>

